<template>
  <button @click="onClick">选择简图</button>
  <view class="file-list" v-if="modelValue">
    <img
      @click="openPopup(item)"
      :src="formatSrc(modelValue)"
      alt=""
      style="width: 30vw"
    />
  </view>
  <!-- 普通弹窗 -->
  <uni-popup ref="popup" background-color="#fff">
    <img :src="formatSrc(modelValue)" alt="" style="width: 70vw" />
  </uni-popup>
</template>

<script setup>
import { useAuthStore } from "@/store/modules/auth.js";
import { ref, defineProps, defineEmits, watch } from "vue";
import { BASE_URL } from "@/utils/requset.js";
import { formatSrc } from "@/utils/index.js";
   
const props = defineProps({
  modelValue: [String, Object, Array],
  // 数量限制
  limit: {
    type: Number,
    default: 5,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});
const emits = defineEmits(["update:modelValue", "change"]);
const authStore = useAuthStore();
const token = authStore.getToken || getStorage("TOKEN");
const fileNum = ref(0);
const files = ref([]);
const onClick = () => {
  uni.chooseImage({
    count: 1, //默认9
    sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ["album"], //album 从相册选图，camera 使用相机
    success: function (res) {
      const { tempFilePaths, tempFiles } = res;
      uni.uploadFile({
        url: BASE_URL + "/file/upload", //服务器地址
        fileType: tempFiles[0].type, //ZFB必填,不然报错
        filePath: tempFilePaths[0], //这个就是我们上面拍照返回或者先中照片返回的数组
        name: "file",
        header: {
          Authorization: `Bearer ${token}`,
        },
        success: (uploadFileRes) => {
          const { data } = uploadFileRes;
          const res = JSON.parse(data);
          const { code, msg } = res;
          if (code !== 200) {
            uni.showToast({
              title: msg,
              icon: "error",
            });
            return false;
          }
          emits("update:modelValue", res.data.fileUrl);
          emits("change", res.data.fileUrl);
        },
      });
    },
  });
};
const del = (index, file) => {
  files.value.splice(index, 1);
  emits("update:modelValue", "");
  emits("change", "");
};
const popup = ref();
const openPopup = (item) => {
  popup.value.open("center");
};
</script>

<style lang="scss" scoped></style>
